import React from 'react'
import {Layout} from 'antd'
import {Route} from 'react-router-dom'
import {getMenuData, menuRouterData} from '../menu'
import SideMenu from '../components/SideMenu'
import GlobalHeader from '../components/GlobalHeader'
import '../index.less'

const { Header, Content, Footer, Sider } = Layout;

class BasicLayout extends React.Component {
  render() {
    const menuData = getMenuData()
    return (
      <Layout>
        <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }}>
          <div className="logo" />
          <SideMenu menuData={menuData} />
        </Sider>
        <Layout style={{ marginLeft: 200 }}>
          <Header style={{ background: '#fff', padding: 0 }}>
            <GlobalHeader />
          </Header>
          <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
            <div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
              {menuRouterData.map(item =>
                <Route key={item.path} path={item.path} component={item.component} />
              )}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Made with By Allen
          </Footer>
        </Layout>
      </Layout>
    )
  }
}

export default BasicLayout
